.ruComponent {
    margin: 0;
    // padding: 35px 0;
    // margin: 0 100px;


}


























.textOne {
    // -webkit
    // -moz-
    // -o-
    // -ms-
    //

    //animation-delay: 1s;        //等待两秒，然后开始动画
    //animation-direction:alternate;    //先执行一遍动画，然后再反向执行一遍动画
    //animation-duration:2s;                    //设置动画在两秒内完成
    //animation-fill-mode:forwards;        //把物体动画地从一个地方移动到另一个地方，并让它停留在那里
    //animation-iteration-count: infinite;           //播放三次动画
    //animation-name: text-keyframes;                     //为 @keyframes 动画指定一个名称
    //animation-play-state:paused;           //暂停动画
    //animation-timing-function: linear;            //从开始到结束以相同的速度播放动画

    animation: text-con-keyframes 1 0.2s linear;
}

.textTwo {
    animation: text-con-keyframes 1 0.6s linear;
}

@keyframes text-con-keyframes {
    from {
        opacity: 0;
        -webkit-transform: translate3d(0, 100%, 0);
        -moz-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0)
    }

    to {
        opacity: 1;
        -webkit-transform: none;
        -moz-transform: none;
        -o-transform: none;
        transform: none
    }
}

@-o-keyframes text-con-keyframes {
    from {
        opacity: 0;
        -webkit-transform: translate3d(0, 100%, 0);
        -moz-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0)
    }

    to {
        opacity: 1;
        -webkit-transform: none;
        -moz-transform: none;
        -o-transform: none;
        transform: none
    }
}

@-moz-keyframes text-con-keyframes {
    from {
        opacity: 0;
        -webkit-transform: translate3d(0, 100%, 0);
        -moz-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0)
    }

    to {
        opacity: 1;
        -webkit-transform: none;
        -moz-transform: none;
        -o-transform: none;
        transform: none
    }
}

@-webkit-keyframes text-con-keyframes {
    from {
        opacity: 0;
        -webkit-transform: translate3d(0, 100%, 0);
        -moz-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0)
    }

    to {
        opacity: 1;
        -webkit-transform: none;
        -moz-transform: none;
        -o-transform: none;
        transform: none
    }
}






// noinspection SpellCheckingInspection
// animation-name	指定要绑定到选择器的关键帧的名称
/*
    keyframename	指定要绑定到选择器的关键帧的名称（为 @keyframes 动画指定一个名称）
    none	指定有没有动画（可用于覆盖从级联的动画）
    */
// animation-duration	动画指定需要多少秒或毫秒完成
/*
    （默认值为 0，意味着没有动画效果。）
    */
// animation-timing-function	设置动画将如何完成一个周期 
/*
    linear	动画从头到尾的速度是相同的。	测试
    ease	默认。动画以低速开始，然后加快，在结束前变慢。	测试
    ease-in	动画以低速开始。	测试
    ease-out	动画以低速结束。	测试
    ease-in-out	动画以低速开始和结束。	测试
    cubic-bezier(n,n,n,n)	在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。 
    */
// animation-delay	设置动画在启动前的延迟间隔。
/*
    以秒或毫秒计。默认值为0
    */
// animation-iteration-count	定义动画的播放次数。
/*
    n	一个数字，定义应该播放多少次动画	测试 »
    infinite	指定动画应该播放无限次（永远）
    */
// animation-direction	指定是否应该轮流反向播放动画。
/*
    normal	默认值。动画按正常播放。	测试 »
    reverse	动画反向播放。	测试 »
    alternate	动画在奇数次（1、3、5...）正向播放，在偶数次（2、4、6...）反向播放。	测试 »
    alternate-reverse	动画在奇数次（1、3、5...）反向播放，在偶数次（2、4、6...）正向播放。	测试 »
    initial	设置该属性为它的默认值。请参阅 initial。	
    inherit	从父元素继承该属性。请参阅 inherit。
    */
// animation-fill-mode	规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。
/*
    none	默认值。动画在动画执行之前和之后不会应用任何样式到目标元素。
    forwards	在动画结束后（由 animation-iteration-count 决定），动画将应用该属性值。
    backwards	动画将应用在 animation-delay 定义期间启动动画的第一次迭代的关键帧中定义的属性值。这些都是 from 关键帧中的值（当 animation-direction 为 "normal" 或 "alternate" 时）或 to 关键帧中的值（当 animation-direction 为 "reverse" 或 "alternate-reverse" 时）。
    both	动画遵循 forwards 和 backwards 的规则。也就是说，动画会在两个方向上扩展动画属性。
    initial	设置该属性为它的默认值。请参阅 initial。
    inherit	从父元素继承该属性。请参阅 inherit。
    */
// animation-play-state	指定动画是否正在运行或已暂停。
/*
    paused	指定暂停动画	测试 »
    running	指定正在运行的动画
    */
// initial	设置属性为其默认值。 阅读关于 initial的介绍。（）
// inherit	从父元素继承属性。 阅读关于 initinherital的介绍。（）